<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agentic AI Performance Dashboard 2025</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #2c3e50;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .header h1 {
            color: #2c3e50;
            font-size: 2.5em;
            margin-bottom: 10px;
            font-weight: 700;
        }
        
        .header .subtitle {
            color: #7f8c8d;
            font-size: 1.2em;
            margin-bottom: 15px;
        }
        
        .data-info {
            background: #ecf0f1;
            padding: 15px;
            border-radius: 10px;
            display: inline-block;
            font-weight: 600;
            color: #2980b9;
        }
        
        .key-metrics {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .metric-card {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            text-align: center;
            transition: transform 0.3s ease;
        }
        
        .metric-card:hover {
            transform: translateY(-5px);
        }
        
        .metric-card h3 {
            color: #34495e;
            font-size: 1.1em;
            margin-bottom: 15px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .metric-value {
            font-size: 2.5em;
            font-weight: 700;
            margin-bottom: 10px;
        }
        
        .multimodal .metric-value { color: #e74c3c; }
        .edge .metric-value { color: #27ae60; }
        .bias .metric-value { color: #3498db; }
        .performance .metric-value { color: #9b59b6; }
        
        .metric-subtitle {
            color: #7f8c8d;
            font-size: 0.9em;
        }
        
        .charts-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }
        
        .chart-container {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .chart-container h3 {
            color: #2c3e50;
            margin-bottom: 20px;
            text-align: center;
            font-size: 1.3em;
        }
        
        .chart-wrapper {
            position: relative;
            height: 300px;
            margin-bottom: 10px;
        }
        
        .usecase-analysis {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .usecase-analysis h2 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 25px;
            font-size: 1.8em;
        }
        
        .usecase-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .usecase-card {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            border-left: 5px solid;
        }
        
        .usecase-card.multimodal { border-left-color: #e74c3c; }
        .usecase-card.edge { border-left-color: #27ae60; }
        .usecase-card.bias { border-left-color: #3498db; }
        
        .usecase-card h4 {
            color: #2c3e50;
            margin-bottom: 15px;
            font-size: 1.2em;
        }
        
        .usecase-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .stat-label {
            color: #7f8c8d;
            font-size: 0.9em;
        }
        
        .stat-value {
            font-weight: 700;
            color: #2c3e50;
        }
        
        .footer {
            text-align: center;
            color: #7f8c8d;
            padding: 20px;
            margin-top: 20px;
        }
        
        @media (max-width: 768px) {
            .container { padding: 15px; }
            .header h1 { font-size: 2em; }
            .header .subtitle { font-size: 1em; }
            .charts-section { grid-template-columns: 1fr; }
            .chart-container { padding: 20px; }
            .chart-wrapper { height: 250px; }
            .key-metrics { grid-template-columns: 1fr; }
            .usecase-grid { grid-template-columns: 1fr; }
        }
        
        @media (max-width: 480px) {
            .header { padding: 20px; }
            .metric-card { padding: 20px; }
            .chart-container { padding: 15px; }
            .usecase-analysis { padding: 20px; }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Header -->
        <div class="header">
            <h1>Agentic AI Performance Dashboard</h1>
            <div class="subtitle">智能体AI性能分析报告 2025</div>
            <div class="data-info">
                📊 实际处理数据记录数：5,000 条
            </div>
        </div>

        <!-- Key Metrics -->
        <div class="key-metrics">
            <div class="metric-card multimodal">
                <h3>多模态处理能力</h3>
                <div class="metric-value">14.8%</div>
                <div class="metric-subtitle">740 个智能体具备多模态能力</div>
            </div>
            
            <div class="metric-card edge">
                <h3>边缘设备兼容性</h3>
                <div class="metric-value">53.9%</div>
                <div class="metric-subtitle">2,693 个智能体支持边缘部署</div>
            </div>
            
            <div class="metric-card bias">
                <h3>偏见检测能力</h3>
                <div class="metric-value">0.774</div>
                <div class="metric-subtitle">平均偏见检测分数 (43% 高分智能体)</div>
            </div>
            
            <div class="metric-card performance">
                <h3>整体性能表现</h3>
                <div class="metric-value">65.2%</div>
                <div class="metric-subtitle">平均成功率 (准确度: 66.7%)</div>
            </div>
        </div>

        <!-- Charts Section -->
        <div class="charts-section">
            <!-- Agent Types Distribution -->
            <div class="chart-container">
                <h3>智能体类型分布</h3>
                <div class="chart-wrapper">
                    <canvas id="agentTypesChart"></canvas>
                </div>
            </div>

            <!-- Deployment Environment -->
            <div class="chart-container">
                <h3>部署环境分布</h3>
                <div class="chart-wrapper">
                    <canvas id="deploymentChart"></canvas>
                </div>
            </div>

            <!-- Task Categories -->
            <div class="chart-container">
                <h3>任务类别分布</h3>
                <div class="chart-wrapper">
                    <canvas id="taskCategoriesChart"></canvas>
                </div>
            </div>

            <!-- Model Architectures -->
            <div class="chart-container">
                <h3>模型架构分布</h3>
                <div class="chart-wrapper">
                    <canvas id="modelArchChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Use Case Analysis -->
        <div class="usecase-analysis">
            <h2>核心用例深度分析</h2>
            <div class="usecase-grid">
                <div class="usecase-card multimodal">
                    <h4>🎯 多模态处理分析</h4>
                    <div class="usecase-stats">
                        <span class="stat-label">具备能力的智能体</span>
                        <span class="stat-value">740 个 (14.8%)</span>
                    </div>
                    <div class="usecase-stats">
                        <span class="stat-label">平均性能指数</span>
                        <span class="stat-value">0.652</span>
                    </div>
                    <div class="usecase-stats">
                        <span class="stat-label">主要智能体类型</span>
                        <span class="stat-value">Content Creator, Translation Agent</span>
                    </div>
                    <p style="margin-top: 15px; color: #7f8c8d; font-size: 0.9em;">
                        多模态处理能力在智能体中还处于发展阶段，主要集中在内容创作和翻译等领域。
                    </p>
                </div>

                <div class="usecase-card edge">
                    <h4>📱 边缘设备部署分析</h4>
                    <div class="usecase-stats">
                        <span class="stat-label">兼容的智能体</span>
                        <span class="stat-value">2,693 个 (53.9%)</span>
                    </div>
                    <div class="usecase-stats">
                        <span class="stat-label">平均性能指数</span>
                        <span class="stat-value">0.638</span>
                    </div>
                    <div class="usecase-stats">
                        <span class="stat-label">主要部署环境</span>
                        <span class="stat-value">Edge, Hybrid</span>
                    </div>
                    <p style="margin-top: 15px; color: #7f8c8d; font-size: 0.9em;">
                        超过半数的智能体支持边缘部署，显示了良好的设备适配性和优化水平。
                    </p>
                </div>

                <div class="usecase-card bias">
                    <h4>⚖️ 偏见检测分析</h4>
                    <div class="usecase-stats">
                        <span class="stat-label">平均检测分数</span>
                        <span class="stat-value">0.774</span>
                    </div>
                    <div class="usecase-stats">
                        <span class="stat-label">高分智能体 (>0.8)</span>
                        <span class="stat-value">2,150 个 (43.0%)</span>
                    </div>
                    <div class="usecase-stats">
                        <span class="stat-label">分数范围</span>
                        <span class="stat-value">0.600 - 0.950</span>
                    </div>
                    <p style="margin-top: 15px; color: #7f8c8d; font-size: 0.9em;">
                        偏见检测能力整体表现良好，近半数智能体达到高标准，为AI伦理应用奠定基础。
                    </p>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div class="footer">
            <p>📈 基于 Kaggle Agentic AI Performance Dataset 2025 生成 | 数据更新时间: 2024-12-24</p>
        </div>
    </div>

    <script>
        // Chart.js默认配置
        Chart.defaults.font.family = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
        Chart.defaults.color = '#2c3e50';

        // 数据配置
        const chartColors = [
            '#e74c3c', '#3498db', '#27ae60', '#f39c12', '#9b59b6',
            '#1abc9c', '#34495e', '#e67e22', '#95a5a6', '#2ecc71',
            '#f1c40f', '#8e44ad', '#16a085', '#2980b9', '#d35400', '#7f8c8d'
        ];

        // 智能体类型分布图
        const agentTypesData = {
            labels: ['Customer Service', 'Project Manager', 'Marketing Assistant', 'Research Assistant', 'Email Manager', 'Social Media Manager', 'Task Planner', 'Document Processor', 'Sales Assistant', '其他'],
            datasets: [{
                data: [340, 332, 322, 321, 320, 315, 314, 313, 313, 1810],
                backgroundColor: chartColors,
                borderWidth: 0
            }]
        };

        new Chart(document.getElementById('agentTypesChart'), {
            type: 'doughnut',
            data: agentTypesData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: { padding: 20, font: { size: 11 } }
                    }
                }
            }
        });

        // 部署环境分布图
        const deploymentData = {
            labels: ['Cloud', 'Edge', 'Hybrid', 'Server'],
            datasets: [{
                label: '智能体数量',
                data: [1320, 1356, 1172, 1152],
                backgroundColor: ['#3498db', '#27ae60', '#f39c12', '#e74c3c'],
                borderRadius: 5
            }]
        };

        new Chart(document.getElementById('deploymentChart'), {
            type: 'bar',
            data: deploymentData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    y: { beginAtZero: true, grid: { color: '#ecf0f1' } },
                    x: { grid: { display: false } }
                }
            }
        });

        // 任务类别分布图
        const taskCategoriesData = {
            labels: ['Text Processing', 'Decision Making', 'Communication', 'Creative Writing', 'Data Analysis', 'Customer Support'],
            datasets: [{
                label: '智能体数量',
                data: [872, 846, 823, 801, 792, 866],
                backgroundColor: ['#e74c3c', '#3498db', '#27ae60', '#f39c12', '#9b59b6', '#1abc9c'],
                borderRadius: 5
            }]
        };

        new Chart(document.getElementById('taskCategoriesChart'), {
            type: 'bar',
            data: taskCategoriesData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: 'y',
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    x: { beginAtZero: true, grid: { color: '#ecf0f1' } },
                    y: { grid: { display: false } }
                }
            }
        });

        // 模型架构分布图
        const modelArchData = {
            labels: ['Mixtral-8x7B', 'PaLM-2', 'CodeT5+', 'Claude-2', 'GPT-4'],
            datasets: [{
                data: [1156, 1064, 1023, 892, 865],
                backgroundColor: chartColors.slice(0, 5),
                borderWidth: 0
            }]
        };

        new Chart(document.getElementById('modelArchChart'), {
            type: 'polarArea',
            data: modelArchData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: { padding: 15, font: { size: 11 } }
                    }
                },
                scales: {
                    r: {
                        beginAtZero: true,
                        grid: { color: '#ecf0f1' }
                    }
                }
            }
        });
    </script>
</body>
</html>